<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<link rel="shortcut icon" href="images/content/favicon.ico" />
<meta http-equiv="Content-Script-Type" content="text/javascript" /> 

<meta name="robots" content="index, follow" />
<meta name="keywords" content="" />
<meta name="title" content="" />
<meta name="description" content="" />
<title>Union Corp</title>
<link rel="shortcut icon" href="./images/favicon.ico" />
<!-- ////////////////////////////////// -->
<!-- //      Start Stylesheets       // -->
<!-- ////////////////////////////////// -->
<link href="./styles/style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="./styles/color.css" rel="stylesheet" type="text/css" media="screen" />
<link href="./styles/inner.css" rel="stylesheet" type="text/css" media="screen" />

<!-- ////////////////////////////////// -->
<!-- //      Javascript Files        // -->
<!-- ////////////////////////////////// -->
<script type="text/javascript" src="./js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="./js/hoverIntent.js"></script> 
<script type="text/javascript" src="./js/superfish.js"></script> 
<script type="text/javascript" src="./js/supersubs.js"></script> 
<script type="text/javascript">
jQuery(document).ready(function(){
	//Menu
	jQuery("ul.sf-menu").supersubs({ 
	minWidth		: 12,		// requires em unit.
	maxWidth		: 27,		// requires em unit.
	extraWidth		: 1		// extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
						   // due to slight rounding differences and font-family 
	}).superfish();  // call supersubs first, then superfish, so that subs are 
					 // not display:none when measuring. Call before initialising 
					 // containing tabs for same reason. 
});
</script>

<meta charset="UTF-8"></head>
<body>

<div id="wrapper">
    <div id="wrapper-top">
    	<div class="container">
        	<div class="twelve columns">
                <div id="top">
                    <div id="topsearch">
                    <form method="post" action="#">
                        <div><input type="text" class="inputbox" value="Type Search..." onblur="if (this.value == ''){this.value = 'Type Search...'; }" onfocus="if (this.value == 'Type Search...') {this.value = ''; }" /></div>
                    </form>
                    </div>
                    <div id="logo"><a href="./index.html"><img src="./images/logo.png" alt="" /></a></div>
                </div>
                <div id="nav">
                    <ul id="topnav" class="sf-menu">
                        <li><a href="./index.html">Home</a></li>
                        <li><a href="./about.html" class="current">About Us</a>
                        	<ul>
                                <li><a href="./about.html">About Page</a></li>
                                <li><a href="./typography.html">Typography</a></li>
                                <li><a href="./single.html">Blog Detail</a></li>
                                <li><a href="#">Dropdown</a>
                                	<ul>
                                        <li><a href="#">Example Dropdown Menu</a></li>
                                        <li><a href="#">Example Dropdown Menu</a></li>
                                        <li><a href="#">Example Dropdown Menu</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="./services.html">Services</a></li>
                        <li><a href="./portfolio.html">Portfolio</a></li>
                        <li><a href="./blog.html">Blog</a></li>
                        <li><a href="./contact.html">Contacts</a></li>
                    </ul><!-- #topnav -->
                </div><!-- #nav -->	
            </div>
        </div><!-- .container -->
    </div><!-- end #wrapper-top -->	
    <div id="wrapper-content">
    	<div class="container">
        	<div class="twelve columns">
                <div id="content" class="inner">
                	
                    <h1 class="pagetitle">Typography</h1>
                    <p>Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
<p>Vivamus placerat cursus lorem, id mollis enim cursus quis. Pellentesque ac tortor ac quam hendrerit pharetra. Integer turpis eros, vulputate et pellentesque rhoncus, tincidunt sodales est. Aliquam volutpat egestas leo vitae pretium. Sed et urna nisi, aliquet faucibus magna.</p>

                     <div class="separator"></div>
                     
                    <div class="one_half firstcols">
                        <h1>This is H1 tag</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed. Nunc quam nunc, auctor id fringilla ut, faucibus euismod felis. Phasellus in est diam. Ut dolor neque, luctus ut laoreet non, dictum non diam. Donec lectus tortor, facilisis et dignissim vel, fringilla nec magna.</p>
                    </div>
                    <div class="one_half lastcols">
                        <h2>This is H2 tag</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed. Nunc quam nunc, auctor id fringilla ut, faucibus euismod felis. Phasellus in est diam. Ut dolor neque, luctus ut laoreet non, dictum non diam. Donec lectus tortor, facilisis et dignissim vel, fringilla nec magna.</p>
                    </div>
                    
                    <div class="separator"></div>
                    
        
                    <div class="one_third firstcols">
                    <h3>This is H3 tag</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed. Nunc quam nunc, auctor id fringilla ut, faucibus euismod felis. Phasellus in est diam. Ut dolor neque, luctus ut laoreet non, dictum non diam.</p>
                    </div>
                    <div class="one_third">
                    <h4>This is H4 tag</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed. Nunc quam nunc, auctor id fringilla ut, faucibus euismod felis. Phasellus in est diam. Ut dolor neque, luctus ut laoreet non, dictum non diam.</p>
                    </div>
                    <div class="one_third lastcols">
                    <h5>This is H5 tag</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed. Nunc quam nunc, auctor id fringilla ut, faucibus euismod felis. Phasellus in est diam. Ut dolor neque, luctus ut laoreet non, dictum non diam.</p>
                    </div>
                    
                    <div class="separator"></div>
                    
                    <div class="one_fourth firstcols">
                    <h5>Content with dropcaps</h5>
                    <p><span class="dropcap1">A</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed.</p>
                    </div>
                    <div class="one_fourth">
                    <h5>Content with dropcaps</h5>
                    <p><span class="dropcap1">B</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed.</p>
                    </div>
                    <div class="one_fourth">
                    <h5>Content with dropcaps</h5>
                    <p><span class="dropcap1">C</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed.</p>
                    </div>
                    <div class="one_fourth lastcols">
                    <h5>Content with dropcaps</h5>
                    <p><span class="dropcap1">D</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed.</p>
                    </div>
        
        <hr/>
        
        <h4>Pullquotes &amp; Blockquotes</h4>
        
        <span class="pullquote-right">This is a pullquote right. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. </span>
        <p>This is a blockquote. Donec iaculis mollis mauris. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Nullam dignissim convallis est.</p>
        <p>Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
        <span class="pullquote-left">This is pullquote left. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</span>
        <p>Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
        <p>Vivamus placerat cursus lorem, id mollis enim cursus quis. Pellentesque ac tortor ac quam hendrerit pharetra. Integer turpis eros, vulputate et pellentesque rhoncus, tincidunt sodales est. Aliquam volutpat egestas leo vitae pretium. Sed et urna nisi, aliquet faucibus magna.</p>
        <blockquote><div>This is Blockquote. Sed iaculis, purus quis imperdiet laoreet, dui arcu vulputate urna, non molestie enim tellus a metus. Pellentesque ac tortor ac quam hendrerit pharetra.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.</div>
        </blockquote>
        <p>Vivamus placerat cursus lorem, id mollis enim cursus quis. Pellentesque ac tortor ac quam hendrerit pharetra. Integer turpis eros, vulputate et pellentesque rhoncus, tincidunt sodales est. Aliquam volutpat egestas leo vitae pretium. Sed et urna nisi, aliquet faucibus magna.</p>
        
        <hr/>
        
        <h4>Highlight Text</h4>
        <p><span class="highlight1">This is a highlight1 span class</span> Quisque gravida porttitor sodales. Mauris odio orci, vestibulum quis condimentum ac, vestibulum quis ipsum. Vivamus vulputate, metus non pulvinar commodo, enim odio tincidunt nunc, vel luctus mauris massa aliquet magna. Morbi eros enim, tempor scelerisque dignissim id, hendrerit pulvinar tortor.</p>
        <p>Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. <span class="highlight2">This is a highlight2 span class.</span> tincidunt nec, gravida vehicula, nisl. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
        
        <hr/>
        
        <h4>Dropcaps</h4>
        <p><span class="dropcap1">A</span>orem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. This is a blockquote. Aenean arcu elit, tristique semper pulvinar adipiscing. Donec faucibus. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
        
        <p>Aesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy.</p>
       
        <p><span class="dropcap2">B</span>orem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. This is a blockquote. Aenean arcu elit, tristique semper pulvinar adipiscing. Donec faucibus. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
        
        <p>Aesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy.</p>
       
                
                	<div class="clear"></div>
                </div><!-- #content -->	
            </div>
        </div>
    </div><!-- end #wrapper-content -->
    <div id="wrapper-footer">
    	<div class="container">
        	<div class="twelve columns">
                <div id="footer_text">
                	Copyright &copy;2011 Union Corp.  All Rights Reserved
                </div>
            </div>
        </div>
    </div><!-- end #wrapper-footer -->	
</div><!-- end #wrapper -->	

</body>
</html>
